@import "./adaptive.scss";

.marketingSystemBox {
    width: pxToRem(676.17);
    height: pxToVh(520.34);

    .marketingSystem-ul {
        width: 100%;
        height: 100%;
        // padding: 25.34px 25px 6.33px 16.67px;
        padding: pxToVh(25.34) pxToRem(25) pxToVh(6.33) pxToRem(16.67);
        box-sizing: border-box;

        li {
            float: left;
            width: pxToRem(311);
            // height: pxToVh(158);
            height: 15vh;
            background-image: none;
            padding-bottom: pxToVh(6.71);
            margin-bottom: pxToVh(7);

            .echartReact {
                height: 85% !important;
            }
            .chartTitle{position: relative;}
            .totalNum{position: absolute;top:0;right:0;  
                .totalNum span.text{color:rgb(182, 219, 251);}
                .totalNum span.value{color:#FFB000;}
            }
        }

        li:nth-child(1),
        li:nth-child(3) {
            padding-right: pxToRem(13);
        }

        li:nth-child(2),
        li:nth-child(4) {
            padding-left: pxToRem(13);
        }

        li:nth-child(5) {
            width: 6.345rem;
            margin-bottom: 0px;
            .echartReact {
                height: 90% !important;
            }
        }
    }
}
.radarBoxWrap{
    width:pxToRem(1187.67);
    height: pxToVh(356.448);
    .radarLegend{
        width:pxToRem(200);margin:0 auto;
        height:pxToVh(36.448);
        .tulibox{color:#B6DBFB;font-size:pxToRem(10);width:pxToRem(100);height:pxToVh(8.33);line-height:pxToVh(8.33);display:inline-block;white-space: nowrap;
            .tuli{width:pxToRem(8.33);height:pxToRem(8.33);margin:0 pxToRem(5);}
        }
        
    }
.radarBox {
    width: pxToRem(1167.67);
    height: pxToVh(320.448);
    // height: pxToVh(291.778);
    padding: pxToVh(28.67) pxToRem(10) 0;
    .echartReact {
        height: 100% !important;
    }

    .oddChildItem {
        width: 20%;
        float: left;
        // padding-top: pxToVh(41.5);
        height: 100%;
    }

    .evenChildItem {
        width: 20%;
        float: left;
        // padding-top: pxToVh(12.88);
        height: 100%;
    }
}
}

.no2RadarBox {
    width: pxToRem(381.33);
    height: pxToVh(381.33);

    .echartReact {
        height: 100% !important;
    }
}

.chartBoxWrap {
    width: pxToRem(410.83);
    height: pxToVh(230.33);

    .echartReact {
        height: 100% !important;
    }
}

.scatterBox {
    width: pxToRem(410.83);
    height: pxToVh(260);

    .chartBox .echartReact {
        height: 100% !important;
        padding-top: pxToVh(20);
    }
}

.executorProjectsStateBox {
    width: pxToRem(410.83);
    height:  pxToVh(260);

    .echartReact {
        height: 100% !important;
    }
}

.executorDistributionOfClients {
    width: pxToRem(410.83);
    height:  pxToVh(260);

    .echartReact {
        height: 100% !important;
    }
}

.subProjectsState {
    width: pxToRem(364.17);
    // height: pxToVh(251.67);
    // height:pxToVh(220.95);
    height:2.21rem;
    position: absolute;
    left: 0.8567em;
    bottom: 0;
    .subProjectsStateChildren{
        height: 100%;
        position: relative;
        .echartReact {
            height: 85% !important;
            padding: pxToVh(15) pxToRem(11.5) 0 pxToVh(5);
        }
        li.cur{
            color:rgba(0,215,255,1) !important;
        }
        // .areaTotal{
        //     position: absolute;top:pxToVh(15);right:pxToRem(20);color:#fff;font-size:pxToRem(10);
        // }
        .detailItem{float:right;padding-left:pxToRem(6);margin-top:pxToVh(15);
            .iconBox{float:left;color:#ADF6FF;font-size:pxToRem(24)}
            .content{float:left;width:pxToRem(60);}
            span.text{font-size:pxToRem(10.67);color:#ADF6FF;padding-left:pxToRem(2.67);line-height:pxToVh(12);display: block;float:left;}
            span.value{font-size:pxToRem(13.33);color:#FFB000;padding-left:pxToRem(2.67);display: block;float:left;line-height:pxToVh(12);padding-top:pxToVh(5)}
            }
    }
}

.peopleStatisticsBox {
    width:  pxToRem(410);
    height: pxToVh(634);

    .peopleTotal {
        padding: pxToVh(16.67) 0 0;
        width: pxToRem(304);
        height: pxToVh(306.66);
        margin: 0 auto;

        li {
            background: url(../static/bgshort.png) no-repeat;
            background-size: 100% 100%;
            width: pxToRem(128.83);
            height: pxToVh(76.5);
            margin: pxToVh(11.83) pxToRem(11.585) 0;
            float: left;

            .value {
                color: #FFB000;
                font-size: pxToRem(15);
                text-align: center;
                line-height: pxToVh(26);
                margin: pxToVh(16) 0 0;
            }

            .text {
                color: #ADF6FF;
                font-size: pxToRem(10.67);
                text-align: center;
                line-height: pxToVh(15);
                margin-bottom: 0;
            }
        }

        li:nth-child(5) {
            background: url(../static/bglong.png) no-repeat;
            background-size: 100% 100%;
            width: pxToRem(280.83);
            margin-top: pxToVh(20.33);
        }
    }

    .chartBox .chartContent {
        background: url("../static/container5.png") no-repeat;
        background-size: 100% 100%;
    }

    .chartBox .echartReact {
        height: pxToVh(308.67) !important;
        padding-top: 0px;
    }
}

.customerQuantity {
    .echartReact {
        height: pxToVh(288.77) !important;
    }
}
    .offlineBox {
        width: pxToRem(351.67);
        height: pxToVh(338.944);
        margin-left: pxToRem(45.5);

        .offlineTitle {
            height: pxToVh(47.5);
            line-height: pxToVh(28);
            padding-top: pxToVh(16);
            background: url("../static/offline.png") no-repeat;
            background-size: pxToRem(48) pxToRem(47.5);
            padding-left: pxToRem(64.17);
            font-size: pxToRem(20);
            color: #FFB000;
        }

        .offlineContent {
            width: pxToRem(351.67);
            padding-left: 0;

            li {
                background: url("../static/offlinebg.png") no-repeat;
                background-size: 100% 100%;
                width: 100%;
                height: pxToVh(104.17);
                margin: pxToVh(11.33) 0 pxToVh(3.34);
                float: left;

                .value {
                    color: #FFB000;
                    font-size: 30px;
                    text-align: center;
                    line-height: pxToVh(42);
                    margin-bottom: 0;
                }

                .text {
                    color: #00D4FF;
                    font-size: 12px;
                    text-align: center;
                    line-height: pxToVh(16.67);
                    margin: pxToVh(20.17) 0 pxToVh(5.33);
                }
            }

        }
    }

    .lineBarchartBox{
        width: pxToRem(411.008);
        height: pxToVh(308.224);
        .chartBox .echartReact {
            height: 100% !important;
            padding-top: pxToVh(20);
        }
    }

    .AverageTimepointBox{
        width: pxToRem(411.008);
        height: pxToVh(308.224);
        .chartTitle{padding-left:0;
            li{ 
                height: pxToVh(18.67);
                line-height: pxToVh(18.67);
                background: url("../static/circleIcon2.png") no-repeat left pxToRem(3);
                background-size: pxToRem(12.67) pxToRem(12.67);
                padding-left: pxToRem(15.67);
                font-size: pxToRem(13.33);
                color: rgba(173,246,255,.4);
                display: inline-block;
                margin-right:pxToRem(16.33);
                &.activeIcon{
                    background: url("../static/circleIcon1.png") no-repeat left pxToRem(3);
                    background-size: pxToRem(12.67) pxToRem(12.67);
                    color: #ADF6FF;
                }
            }
        }
        .chartContent{width:100%;background:url("../static/chartBgBox.png") no-repeat;background-size: 100% 100%;height:pxToVh(289.5);}
        .echartReact{height: 100% !important;padding:pxToVh(20) pxToRem(11.5) pxToVh(5) pxToRem(5);}
    }

    .totalFBC{position: absolute; top: 0;right: 0;width:pxToRem(130);
        .iconBox{float:left;color:#ADF6FF;font-size:pxToRem(24)}
        .content{float:left;width:pxToRem(60);}
        span.text{font-size:pxToRem(10.67);color:#ADF6FF;padding-left:pxToRem(5);line-height:pxToVh(12);display: block;float:left;}
        span.value{font-size:pxToRem(13.33);color:#FFB000;padding-left:pxToRem(5);display: block;float:left;line-height:pxToVh(12);}
        }